<template>
  <div>
    <el-container style="height: 100%">
      <!--      |左侧导航栏|-->
      <el-aside width="200px"  style="background-color: rgb(238, 241, 246);height: 725px">
        <el-menu :default-openeds="['1', '3']" style="min-height: 100%;overflow-x: hidden"
                 background-color = "rgb(48,65,86)"
                 text-color="#fff"
                 active-text-color="#ffd04b"
                 router
        >
          <div style="height: 60px;line-height: 60px; text-align: center">
            <img src="@/assets/logo.png" style="width: 20px; position: relative; top:5px">
            <b style="color: white">智慧食堂</b>
          </div>

          <el-menu-item >订单</el-menu-item>

        </el-menu>

      </el-aside>

      <el-container>
        <!--      |右侧上方内容|-->
        <el-header style="text-align: right; font-size: 12px">
          <div style="display: flex; font-size: 12px; line-height: 60px">
            <div style="flex: 1; text-align: left">
              <el-breadcrumb separator="/" style="display: inline-block">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item><a href="/">智慧食堂</a></el-breadcrumb-item>
              </el-breadcrumb>
            </div>
            <el-dropdown style="width: 70px; cursor: pointer">
              <i class="el-icon-setting" style="margin-right: 15px"></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <span style="text-decoration: none" @click="logout">退出账户</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <span>{{machine.name}}</span>
          </div>
        </el-header>

        <!--          当前页面的子路由会在 "router-view"里面展示-->
        <el-main>
        <el-card>
          <el-table :data="tableData"  style="width: 100%">
            <el-table-column prop="formid" label="订单号" width="180"></el-table-column>
            <el-table-column prop="tableid" label="餐桌号" width="180"></el-table-column>
            <el-table-column prop="username" label="顾客名" width="180"></el-table-column>
            <el-table-column prop="detail" label="订单详情"></el-table-column>
            <el-table-column prop="begin" label="开始时间">
              <template #="{ row }">
                <el-button type="success" style="min-height: 20px;min-width: 20px;text-align: center" @click="handleTransform(row)">{{row.flag}}</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!--          分页组件-->
          <div style="padding: 10px 0;margin-top: 20px;text-align: center;">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
          </div>

        </el-card>
        </el-main>

      </el-container>

    </el-container>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import request from "@/utils/request";

import Aside from "@/components/Aside.vue";
import Header from "@/components/Header.vue";

// 路由实例
const router = useRouter()

// 数据状态
const tableData = ref([])
const total = ref(0)
const pageNum = ref(1)
const pageSize = ref(5)
const form = ref({})
const machine = ref(JSON.parse(localStorage.getItem("user_machine")) || {})

// 生命周期钩子
onMounted(() => {
  load()
})

// 加载数据方法
const load = async () => {
  try {
    // 请求分页相关数据
    const res = await request.get("/machine/form/select", {
      params: {
        pageNum: pageNum.value,
        pageSize: pageSize.value,
      }
    })
    console.log("content", res.content)
    tableData.value = res.content.data
    total.value = res.content.total
  } catch (error) {
    console.error("加载数据失败", error)
    ElMessage.error("加载数据失败")
  }
}

// 分页处理方法
const handleCurrentChange = (newPageNum) => {
  pageNum.value = newPageNum
  load()
}

const handleSizeChange = (newPageSize) => {
  pageSize.value = newPageSize
  load()
}

// 订单状态转换方法
const handleTransform = async (row) => {
  form.value = { ...row }
  try {
    const res = await request.post("/machine/form/transform", form.value)
    if (res.success) {
      if (form.value.flag === "完成") console.log("订单已完成", form.value)
      load()
      ElMessage.info(res.message)
    } else {
      ElMessage.error(res.message)
    }
  } catch (error) {
    console.error("订单状态转换失败", error)
    ElMessage.error("订单状态转换失败")
  }
}

// 退出登录方法
const logout = () => {
  localStorage.removeItem("user_machine")
  router.push("/login")
  ElMessage.success("退出成功。")
}
</script>    